<div class="col-lg-6">
	<div class="panel panel-default">
		<div class="panel-body" style = "background: #CEE3F6">
		
		<div class="form-group col-xs-6"  style="margin-left:50%">
			</br><label style="color: rgb(224, 73, 1);"><span class="glyphicon glyphicon-asterisk" id="icon"/>&nbsp;Campos obligatorios</label>
		</div>
		
			<div class="col-lg-12"><h2>Nuevo<b id="resaltador"> &nbsp;Personal</b></h2><br/><br/></div>
			<div class="col-xs-12">
				<form id = "myForm" role="form" enctype="multipart/form-data" action="insertar_registro.php" method="post">
					<div class="form-group col-xs-4" id = "cedula">
						<label><span class="glyphicon glyphicon-asterisk" id="icon"/>C&eacute;dula&nbsp;</label>
						<input type="text" class="form-control" maxlength="8" name="cedula" placeholder="12345678" required>
					</div>
					<div class="col-xs-12"></div>
					<div class="form-group col-xs-6">
						<label><span class="glyphicon glyphicon-asterisk" id="icon"/>Primer Nombre&nbsp;</label>
						<input type="text" class="form-control" name="primer_nombre" placeholder="Mi primer nombre" required>
					</div>
					<div class="form-group col-xs-6">
						<label>Segundo Nombre</label>
						<input type="text" class="form-control" placeholder="Mi segundo nombre" name="segundo_nombre">
					</div>
					<div class="form-group col-xs-6">
						<label><span class="glyphicon glyphicon-asterisk" id="icon"/>Primer Apellido&nbsp;</label>
						<input type="text" class="form-control" name="primer_apellido" placeholder="Mi primer apellido" required>
					</div>
					<div class="form-group col-xs-6">
						<label>Segundo Apellido</label>
						<input type="text" class="form-control" placeholder="Mi segundo apellido" name="segundo_apellido">
					</div>
					<div class="form-group col-xs-8">
			          	<label><span class="glyphicon glyphicon-asterisk" id="icon"/>Sexo&nbsp;</label>
			          	<div>
							<input type="radio" name="sexo" value="M" checked>&nbsp;Masculino &nbsp;&nbsp;&nbsp;
							<input type="radio" name="sexo" value="F">&nbsp;Femenino
						</div>
					</div>
					<div class="col-xs-12"></div>
					<div class="form-group col-xs-6" id="correo_inst">
						<label for="correo_inst"><span class="glyphicon glyphicon-asterisk" id="icon"/>Correo Institucional&nbsp;</label>
						<input type="email" class="form-control" name="correo_inst" type = "email" placeholder="micorreo@ciens.ucv.ve" required>
					</div>
					<div class="form-group col-xs-6" id="correo_alt">
						<label for="correo_alt">Correo Alternativo</label>
						<input type="email" class="form-control" name="correo_alt" placeholder="micorreo@gmail.com" type = "email">
					</div>
					<div class="form-group col-xs-6" id="main_phone">
						<label for="main_phone"><span class="glyphicon glyphicon-asterisk" id="icon"/>Teléfono Principal&nbsp;</label>
						<input type="text" class="form-control" name="main_phone" placeholder="04141234567" required>
					</div>
					<div class="form-group col-xs-6" id="alt_phone">
						<label for="alt_phone"><span class="glyphicon glyphicon-asterisk" id="icon"/>Teléfono Alternativo&nbsp;</label>
						<input type="text" class="form-control" name="alt_phone" placeholder="04161234567" required>
					</div>
					<div class="form-group col-xs-12">
						<label><span class="glyphicon glyphicon-asterisk" id="icon"/>Dirección&nbsp;</label>
						<textarea class="form-control" rows="3" name="address"></textarea>
					</div>
					<div class="form-group col-xs-12">
						<label><span class="glyphicon glyphicon-asterisk" id="icon"/>Tipo de Personal</label>
						<select class="form-control" name ="tipoPersona">
							<option></option>
							<option>Auxiliar Docente</option>
							<option>Estudiante</option>
							<option>Personal Administrativo</option>
							<option>Preparador</option>
							<option>Profesor</option>
						</select>
					</div>
					<div class="col-xs-12"></br></div>
					<div class="col-xs-4"></div>
					<div class="col-xs-4">	
						<input type="submit" id="letra_boton" href="#" class="btn btn-primary form-control" value= "Agregar"></input>
					</div>
					<div class="col-xs-4"></div>
					<div class="col-xs-12"></br></div>
					<input type="hidden" name="tabla" value="persona">
				</form>
			</div> 
		</div>
	</div>
</div>

<div class="col-lg-6">
	<div class="panel panel-default">
		<div id = "formulario_continuacion" class="panel-body" style = "background: #CEE3F6">
		</div>
	</div>
</div>

<script type="text/javascript">
	$('[name=tipoPersona]').change(function (e) {
		tipo = $('[name=tipoPersona]').val();
		if(tipo == "Auxiliar Docente") $.ajax({type:"POST",url:"agregar_auxiliar.html",success:function(result){$("#formulario_continuacion").html(result);}});
		if(tipo == "Estudiante") $.ajax({type:"POST",url:"agregar_estudiante.html",success:function(result){$("#formulario_continuacion").html(result);}});
		if(tipo == "Personal Administrativo") $.ajax({type:"POST",url:"agregar_personal.html",success:function(result){$("#formulario_continuacion").html(result);}});
		if(tipo == "Preparador") $.ajax({type:"POST",url:"agregar_preparador.html",success:function(result){$("#formulario_continuacion").html(result);}});
		if(tipo == "Profesor") $.ajax({type:"POST",url:"agregar_profesor.html",success:function(result){$("#formulario_continuacion").html(result);}});
		if(tipo == "") $("#formulario_continuacion").html('');
		$.ajax({type:"POST",url:"cargar_centros.php",success:function(result){$("[name=centro]").html(result);}});
	});

	$('[name=cedula]').keyup(function (e) 
	{
		var code = $(this).val(); 

		if(/^[0-9]+$/.test(code))
		{
			$.post('validaciones.php', {'cedula':code}, function(data)
			{
				if(data=='SI')
				{
					$("#cedula").addClass("has-error");
					$("#cedula").removeClass("has-success");
				}
				else 
				{
					$("#cedula").removeClass("has-error");
					$("#cedula").addClass("has-success");
				}
			});
		}
		else
		{
			$("#cedula").addClass("has-error");
			$("#cedula").removeClass("has-success");
		}
	});

	$('[name=correo_inst]').keyup(function (e) 
	{
		var code = $(this).val(); 

		if(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+$/.test(code))
		{
			$("#correo_inst").removeClass("has-error");
			/*
EL SISTEMA DEBERIA PERMITIR CORREOS DUPLICADOS ENTRE PROFESORES????

			$.post('validaciones.php', {'cedula':code}, function(data)
			{
				if(data=='SI')
				{
					$("#cedula").addClass("has-error");
				}
				else $("#cedula").removeClass("has-error");
			});*/
		}
		else
			$("#correo_inst").addClass("has-error");
	});

	$('[name=correo_alt]').keyup(function (e) 
	{
		var code = $(this).val(); 

		if(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+$/.test(code))
			$("#correo_alt").removeClass("has-error");
		else
			$("#correo_alt").addClass("has-error");
	});

	$('[name=main_phone]').keyup(function (e) 
	{
		var code = $(this).val(); 

		if(/^[.+?0-9.-]*$/.test(code)) // <---- MEJORAR
			$("#main_phone").removeClass("has-error");
		else
			$("#main_phone").addClass("has-error");
	});

	$('[name=alt_phone]').keyup(function (e) 
	{
		var code = $(this).val(); 

		if(/^[.+?0-9.-]*$/.test(code)) // <---- MEJORAR
			$("#alt_phone").removeClass("has-error");
		else
			$("#alt_phone").addClass("has-error");
	});


</script>
